<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

.halfmoon{
margin-bottom: 4px;
}

.halfmoon ul{
padding: 3px 9px 2px 5px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
border-bottom: 1px solid #929492;
}

.halfmoon li{
display: inline;
margin: 0;
}

.halfmoon li a{
text-decoration: none;
padding: 3px 9px 2px 5px;
margin: 0;
margin-right: 0; /*distance between each tab*/
border-left: 1px solid #DDD;
color: black;
font: bold 14px Verdana;
background: #ECEEEC url(tabright.gif) top right no-repeat;
}

.halfmoon li a:visited{
color: black;
}

.halfmoon li a:hover, .halfmoon li a.current{
background-color: #CDDADA;
color: navy;
}

#tabcontentcontainer{
width:95%; /*width of 2nd level content*/
height:1.5em; /*height of 2nd level content. Set to largest's content height to avoid jittering.*/
}

.tabcontent{
display:none;
}
.tabcontent2{
display:none;
}


.TAB_ { font:Arial; width:185px; margin-left:57px; margin-top:28px;}
	.TAB_ ul { margin:0px; padding:0px;}
	.TAB_ li { margin:0px; padding:0px; list-style:none; list-style-type:none; color:#79c348; float:left; margin-left:12px;}
	.TAB_ li a, .TAB_ li a:link, .TAB_ li a:active , .TAB_ li a:visited { text-decoration:none; font-size:14px; font-weight:bold; color:#79c348; font-family:Arial; }
	.TAB_ li a:hover, .TAB_ li a.current { color:#fb4d00;}
	.SHOP-MENU {float:left; font-family:Arial; font-size:12px; color:#666; font-weight:bold; margin-left:234px;}
	.SHOP-MENU ul { margin:0px; padding:0px; }
	.SHOP-MENU  li { margin:0px; padding:0px; list-style:none; list-style-type:none; float:left; margin-left:5px; padding:5px 8px 8px 5px; }
	.SHOP-MENU  li a, .SHOP-MENU  li a:link, .SHOP-MENU  li a:active, .SHOP-MENU  li a:visited {font-family:Arial; font-size:11px; color:#666; font-weight:bold;}
	.SHOP-MENU  li a:hover{ color:#e47101; text-decoration:none;}
	
</style>
</head>

<body>



<script type="text/javascript">

/***********************************************
* DD Tab Menu II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display (or "" if no corresponding tab content)]:
var initialtab=[1, "sc1"]

//Turn menu into single level image tabs (completely hides 2nd level)?
var turntosingle=0 //0 for no (default), 1 for yes

//Disable hyperlinks in 1st level tab images?
var disabletablinks=0 //0 for no (default), 1 for yes


////////Stop editting////////////////

var previoustab=""

if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')

function expandcontent(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById && turntosingle==0){
highlighttab(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
if (cid!=""){
document.getElementById(cid).style.display="block"
previoustab=cid
}
}
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collectddimagetabs()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
}

function collectddimagetabs(){
var tabobj=document.getElementById("ddimagetabs")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function do_onload(){
collectddimagetabs()
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

</script>




<div style=" width:413px; height:187px; background:url(images/updates/Update_board.png); float:left;">
	<div style=" width:413px; float:left;">
		<div id="ddimagetabs" class="TAB_">
       		<ul>
    			<li><a href="#" onClick="expandcontent('sc1', this)">Event</a></li>
    			<li><a href="#" onClick="expandcontent('sc2', this)">Update</a></li>
    			<li><a href="#" onClick="expandcontent('sc3', this)">News</a></li>
			</ul>
        </div>
	</div>
    <div style=" clear:both;"></div>
    <div style="margin-top:12px; margin-left:21px;">
    		<DIV id="tabcontentcontainer">
				<div id="sc1" class="tabcontent">update</div>
				<div id="sc2" class="tabcontent">event</div>
				<div id="sc3" class="tabcontent">news</div>
			</DIV>
    </div>
    
</div>




<div style="clear:both;"></div>
<div style=" clear:both; background:#036;">----------------------------------------------------------------------------</div>



<script type="text/javascript">

var initialtab2=[1, "sc4"]

var turntosingle2=0 //0 for no (default), 1 for yes

var disabletablinks2=0 //0 for no (default), 1 for yes

var previoustab2=""

if (turntosingle2==1)
document.write('<style type="text/css">\n#tabcontentcontainer2{display: none;}\n</style>')

function expandcontent2(cid, aobject){
if (disabletablinks2==1)
aobject.onclick=new Function("return false")
if (document.getElementById && turntosingle2==0){
highlighttab2(aobject)
if (previoustab2!="")
document.getElementById(previoustab2).style.display="none"
if (cid!=""){
document.getElementById(cid).style.display="block"
previoustab2=cid
}
}
}

function highlighttab2(aobject){
if (typeof tabobjlinks=="undefined")
collectddimagetabs2()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
}

function collectddimagetabs2(){
var tabobj=document.getElementById("ddimagetabs2")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function do_onload(){
collectddimagetabs2()
expandcontent2(initialtab2[1], tabobjlinks[initialtab2[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

</script>


<div style=" height:30px;"></div>
<div style=" width:390px; height:164px; border:solid 1px #ecdbc7; background:#f5f5f5;">
	<div style=" width:390px; height:164px; border:solid 1px #ecdbc7; background:#f5f5f5;">
	<div style=" width:390px; height:29px;">
    <div style="float:left; margin-top:5px; margin-left:10px;"><img src="images/shop.png" width="41" height="16" /></div>
    <div class="SHOP-MENU">
    	<ul>
        	<li><a href="#">ITEM</a></li>
            <li><a href="#">PETS</a></li>
        </ul>
    </div>
    
    
    </div>
    <div style=" width:374px; height:128px; border:solid 1px #ecdbc7; background:#FFF;">
    </div>

</div>

</div>



<div id="ddimagetabs2" class="halfmoon">
<ul>
    <li><a href="#" onClick="expandcontent2('sc4', this)">EVENT</a></li>
    <li><a href="#" onClick="expandcontent2('sc5', this)">UPDATE</a></li>
    <li><a href="#" onClick="expandcontent2('sc6', this)">NEWS</a></li>
</ul>
</div>

<DIV id="tabcontentcontainer2">

<div id="sc4" class="tabcontent2">
	<div style=" width:383px; height:116px; border:solid 2px #00CC33;">
		<div>
        	<ul>
            	<li> EVENTS</li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>	
	</div>
</div>

<div id="sc5" class="tabcontent2">
	<div style=" width:383px; height:116px; border:solid 2px #00CC33;">
		<div>
        	<ul>
            	<li>UPDATES</li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>	
	</div>
</div>

<div id="sc6" class="tabcontent2">
	<div style=" width:383px; height:116px; border:solid 2px #00CC33;">
		<div>
        	<ul>
            	<li>NEWS</li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>	
	</div>
</div>

</DIV>

</body>
</html>
